import React, { Component } from 'react'
import {NavLink,Route} from 'react-router-dom'
import './App.css'
import Home from './pages/Home'
import About from './pages/About'
import MyNavLink from './components/MyNavLink'
/* 
   使用了NavLink标签后，虽然我们可以实现active属性的追加，但是如果类似的导航链接比较多的时候，
   写起来就比较麻烦，我们可以自己在NavLink的基础上封装一下组件

   然后这里再补一下 路由组件和一般组件的区别
   由于后面有笔记，这里就简单说一下：
    (1) 写法不同，一般组件使用的时候外面是套着<>标签，而路由组件则是<Route path="" component={XXX}>的方式来匹配的
    (2) 接收的参数不同，一般组件的话，props参数都是我们自定义的，但路由组件中的props是固定的：history,location,match
   
*/
export default class App extends Component {


    render() {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-offset-2 col-xs-8">
                        <div className="page-header"><h2>React Router Demo</h2></div>
                    </div>
                </div>
                <div className="row">
                    <div className="col-xs-2 col-xs-offset-2">
                        <div className="list-group">
                            {/* 
                            使用Link标签代替 a 标签，这一步是用于实现第一步：浏览器URL的变更
                            */}
                            <MyNavLink to="/about">About</MyNavLink>
                            <MyNavLink to="/home">Home</MyNavLink>
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                {/* 
                                在App.js中，定义路由，路由规定了path对应跳转的组件
                                */}
                                <Route path="/about" component={About}/>
                                <Route path="/home" component={Home}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
